<template>
  <div>
    <div style="cursor: pointer;" @click="dialogFn" >
      <el-image style="width: 100px; height: 100px" :src="coverData.coverUrl" fit="cover"></el-image>
    </div>
    <!-- 1对话框 -->
    <el-dialog title="选择素材" :visible.sync="dialogVisible"  append-to-body>
      <!-- 1-1标签页 -->
      <el-tabs v-model="activeName" type="card">
        <!-- 1-1-1素材库 -->
        <el-tab-pane label="素材库11" name="first">
          <!-- 全部收藏按钮 -->
          <div>
            <el-radio-group v-model="imagesData.collect" size="small" @change="isCollectFn">
              <el-radio-button :label="null">全部</el-radio-button>
              <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 素材 -->
          <el-row style="margin-top: 20px" :gutter="10">
            <el-col class="img_item" :class="{selected: val.url===coverData.sUrl}" :span="4" v-for="val in images" :key="val.id" >
              <el-image style="height: 100px;" :src="val.url" fit="cover" @click="selectFn(val.url)"></el-image>

            </el-col>
          </el-row>
          <!-- 分页 -->
          <el-pagination background layout="prev, pager, next" :total="pageData.totalCount" :page-size="imagesData.per_page"
            @current-change="pageFn" :current-page="imagesData.page">
          </el-pagination>
        </el-tab-pane>
        <!-- 1-1-3上传 -->
        <el-tab-pane label="上传11" name="second">

          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="headers"
            name="image"
            :show-file-list="false"
            :on-success="uploadFn"
            :before-upload="beforeAvatarUpload">
            <img v-if="coverData.uUrl" :src="coverData.uUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="coverFn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import defaultImage from '../assets/default.png'
export default {
  name: 'articlesCover',
  props: ['value'],
  data () {
    return {
      headers: { Authorization: 'Bearer ' + localStorage.token },
      dialogVisible: false, // 弹层
      activeName: 'first', // 标签页
      images: [], // 图片列表
      imagesData: { // 素材
        collect: null,
        page: 1,
        per_page: 5
      },
      pageData: { // 分页
        totalCount: 0
      },
      coverData: {
        sUrl: this.value, // 记录打勾的图片
        uUrl: '', // 记录上传的图片
        coverUrl: this.value || defaultImage// 封面图片的地址
      }
    }
  },
  methods: {
    dialogFn () { // 打开对话框 数据是初始状态
      this.dialogVisible = true
      this.imagesData = { // 素材库显示第一页
        collect: null,
        page: 1,
        per_page: 5
      }
      this.imagesFn()
      this.coverData.uUrl = '' // 清空上传图片处的预览
    },
    imagesFn () { // 获取素材库
      this.$axios.get('/mp/v1_0/user/images', { params: this.imagesData }).then(res => {
        this.images = res.data.data.results
        this.pageData.totalCount = res.data.data.total_count
      }).catch(err => {
        console.log(err)
      })
    },
    pageFn (num) { // 切换页码
      this.imagesData.page = num
      this.imagesFn()
    },
    isCollectFn (collect) { // 切换收藏全部
      this.imagesData.collect = collect
      this.pageFn(1)
    },
    selectFn (url) { // 选择了图片
      this.coverData.sUrl = url
    },
    beforeAvatarUpload (file) { // 上传图片前
      if (file.type !== 'image/jpeg' || file.size / 1024 / 1024 >= 2) {
        this.$message.error('请上传jpg格式的图片(小于2MB)')
        return false
      }
    },
    uploadFn (res, file) { // 上传了图片
      this.coverData.uUrl = URL.createObjectURL(file.raw)
    },
    coverFn () { // 对话框点击确定
      this.coverData.coverUrl = this.activeName === 'first' // 判断在哪个标签页点的确定, 使用对应的url
        ? this.coverData.sUrl
        : this.coverData.uUrl
      this.$emit('input', this.coverData.coverUrl) // 传回父组件
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// 表示当前图片是选中的
  .selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_item{
   position: relative;
    /deep/ img {
     cursor: pointer;
   }
  }

  //上传
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
